<template>
  <page-header title="用户设置" background="#F7F0E6"></page-header>
  <view class="page-user-settings">
    <view class="first-box">
      <view class="item" @tap="getUploadImg()">
        <view class="text">
          头像
        </view>
        <view class="img">
          <image v-if="userInfo.pic" :src="userInfo.pic" />
          <image v-else src="/static/img/avatar.png" />
        </view>
        <view class="text-arrow" />
      </view>
      <view class="item" @tap="toAddressList">
        <view class="text">
          地址管理
        </view>
        <view class="text-arrow" />
      </view>
    </view>
    <view class="other-entrance">
      <view class="item" @tap="toViewer">
        <view class="text">
          观演人管理
        </view>
        <view class="text-arrow" />
      </view>
      <view class="item" @tap="open()">
        <view class="text">
          昵称
        </view>
        <view class="text-arrow">
          {{ userInfo.nickName }}
        </view>
      </view>
      <!-- <view
        class="item"
        @tap="toEditPage('password')"
      >
        <view class="text">
          修改密码
        </view>
        <view class="text-arrow" />
      </view> -->
    </view>
    <view class="login-out" @click="loginOut">
      退出登录
    </view>
    <!-- 上传图片 -->
    <img-box v-if="showImgBoxPopup" ref="imgbox" class="imgbox-pop" @close-img-pop="ImgBoxPopVisible" />
  </view>
  <uni-popup ref="edit" type="center" borderRadius="20px" background-color="white">
    <view class="popup">
      <view class="header">
        <input placeholder="请输入你的昵称" class="input" type="text" v-model="userName">
      </view>
      <view class="button" @tap="submitUserName()">确定</view>
    </view>
  </uni-popup>
</template>

<script setup>
  import {
    reactive,
    ref
  } from 'vue'

  const Data = reactive({
    userInfo: {},
    showImgBoxPopup: false,
    userPic: '',
    userPicUrl: '',
    userName: ''
  })
  const {
    userInfo,
    showImgBoxPopup,
    userName
  } = toRefs(Data)
  const edit = ref(null)
  const open = () => {
    edit.value.open()
  }
  // 修改头像信息
  const submitUserName = () => {
    if (Data.userName == '') {
      uni.showToast({
        title: '昵称不能为空',
        duration: 2000,
        icon: 'none'
      })
      return
    }
    const params = {
      url: '/mall4cloud_user/a/user/ma/update_user',
      method: 'post',
      data: {
        nickName: Data.userName
      }
    }
    http.request(params).then(() => {
      uni.showToast({
        title: '昵称修改成功',
        duration: 2000,
        icon: 'none'
      })
      edit.value.close()
      getUserInfo()
    })
  }

  onLoad(() => {
    getUserInfo()
  })

  const getUserInfo = () => {
    const params = {
      url: '/mall4cloud_user/a/user/ma/user_detail_info',
      method: 'get'
    }
    http.request(params).then((res) => {
      Data.userInfo = res
    })
  }

  // // 去修改信息（性别生日用插件在本页选就好）
  // const toEditPage = (type) => {
  //   if (type === 'nickName') {
  //     uni.navigateTo({
  //       url: `/pages/edit-page/edit-page?type=${type}&nickName=${Data.userInfo.nickName}`
  //     })
  //   } else {
  //     uni.navigateTo({
  //       url: '/pages/edit-page/edit-page?type=' + type
  //     })
  //   }
  // }

  const loginOut = () => {
    const params = {
      url: '/mall4cloud_auth/login_out',
      method: 'post'
    }
    http.request(params).then(() => {
      uni.removeStorageSync('cloudToken')
      uni.removeStorageSync('cloudUserDetails')
      uni.switchTab({
        url: '/pages/my/my'
      })
    })
  }

  const getUploadImg = () => {
    Data.showImgBoxPopup = true
  }

  // 上传头像
  const ImgBoxPopVisible = (imgUrl, url) => {
    if (url) {
      Data.userPic = imgUrl
      Data.userPicUrl = url
      submitUserPic()
    }
    Data.showImgBoxPopup = !Data.showImgBoxPopup
  }

  // 修改头像信息
  const submitUserPic = () => {
    const params = {
      url: '/mall4cloud_user/a/user/ma/update_user',
      method: 'post',
      data: {
        pic: Data.userPicUrl
      }
    }
    http.request(params).then(() => {
      uni.showToast({
        title: '头像修改成功',
        duration: 2000,
        icon: 'none'
      })
      getUserInfo()
    })
  }

  // 去管理地址
  const toAddressList = () => {
    uni.navigateTo({
      url: '/pages/address-list/address-list'
    })
  }

  // 去观演人
  const toViewer = () => {
    uni.navigateTo({
      url: '/pages/my-viewer/my-viewer'
    })
  }
</script>

<style lang="scss" scoped>
  @use "user-settings";
</style>
